<template>
    <div>
        <h1 style="width: 100%;font-size: 30px;">公告审批</h1>
        <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane>
                <template #label>
                    <span class="custom-tabs-label">
                    <span>未审批</span>
                    </span>
                </template>
                <el-table :data="tableData" border style=" width:100%">
                    <el-table-column prop="title" label="标题" />
                    <el-table-column prop="publishDate" label="发布时间" />
                    <el-table-column prop="publishUnitName" label="发布单位" />
                    <el-table-column prop="publisherName" label="发布人" />
                    <el-table-column label="状态" width="120">
                        <el-tag type="primary">待审批</el-tag>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="shenpi(scope.row.id)">
                            查看
                        </el-button>         
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已审批">
                <el-table :data="tableData2" border style=" width:100%">
                    <el-table-column prop="title" label="标题" />
                    <el-table-column prop="publishDate" label="发布时间" />
                    <el-table-column prop="publishUnitName" label="发布单位" />
                    <el-table-column prop="publisherName" label="发布人" />
                    <el-table-column  label="状态">
                            <template #default="scope">
                                <el-tag type="primary" v-show="scope.row.approval==3">待发布</el-tag>
                                <el-tag type="success" v-show="scope.row.approval==4">已发布</el-tag>
                                <el-tag type="warning" v-show="scope.row.approval==5">已驳回</el-tag>
                                <el-tag type="danger"  v-show="scope.row.approval==0">已废弃</el-tag>
                            </template>
                        </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="shenpi(scope.row.id)">
                            查看
                        </el-button>         
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { useUserStore } from '@/stores/user';
import { selectAnctBy } from '@/api/announcemt';
import router from '@/router';
const userstore=useUserStore()
const user=userstore.user
// import { selectAnnouncementCountByState } from '@/api/announcemt';
// import  { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
// const handleClick = (tab: TabsPaneContext, event: Event) => {
//   console.log(tab, event)
// }
const shenpi=((valid)=>{
    router.push({
        path: '/home/applicationApproval',
        query: {
            id: valid
        }
    });
})

// const formRef = ref(null); // 表单引用
// const openDialog=(async(id)=>{
//     dialogVisible.value = true;
//     const response= await selectAnctOne(id);
//     form.value= response.data.data
// });

// const handleClose = () => {
//   dialogVisible.value = false;
//   formRef.value.resetFields(); // 清空表单
// };
const tableData=ref(null)
const tableData2=ref(null)
const select=(async()=>{
    let response={}
    response=await selectAnctBy('',2,0,0,false);
    tableData.value= response.data.data
    response=await selectAnctBy('',10,0,0,false);
    tableData2.value= response.data.data
})
onMounted(()=>{
    select()
})
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>